<template>
   <div id="wap">
        <div class="wap-header" id="wap-header" >
            <div class="wap-logo">
                <img src="/static/images/wap/logo1.png" class="mt5"  alt="">
            </div>
            <div class="wap-img-text">
                <img src="/static/images/wap/bg3.png" width="272"  alt="">
            </div>
            <div class="tc mt50 down-crr-img"><img src="/static/images/wap/down.png" width="30" alt=""></div>
        </div>

        <div class="platform">
            <p class="c-blue-color fs30 tc mt50">平台优势</p>
            <p class="fs18 tc mt20 c-gray-color">社区平台优势尽显，制胜金融投资有高招</p>
                <div class="haibei-guide-content clearfix" style="padding-bottom:30px;">
                    <template v-for="(value,key) in platform">
                        <dl class="c-gray-color tc platform-item index-items" style="width:48%">
                            <dt class="tc"><img :src="value.url" alt=""></dt>
                            <dd class="mt30 c-black-color fs16">
                                {{value.title}}
                            </dd>
                            <dd class="mt15 c-gray-color fs12" v-html="value.desc"></dd>
                        </dl>
                    </template>
                
            </div>
        </div>

        <div class="haibei-news" style="background:#eff3f5;height:550px;">

            <p class="c-blue-color fs30 tc">最新动态</p>
            <p class="fs18 tc mt20 c-gray-color">一分钟带你玩转社区，high翻汇市</p>
            <div class="haibei-guide-content clearfix" style="padding-bottom:20px;">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <template v-for="(value,key) in newsList">
                            <div class="swiper-slide">
                                <dl class="c-gray-color tc platform-item" style="width:85%">
                                    <dt class="tc"><img :src="value.url" alt=""></dt>
                                    <dd class="mt30 c-black-color fs18">
                                        <p class="mt10 fs18">{{value.title}}</p>
                                        <p class="mt10 fs18">{{value.subTitle}}</p>
                                    </dd>
                                    <dd class="mt15 c-gray-color fs12" style="line-height:30px" v-html="value.desc"></dd>
                                </dl>
                            </div>
                        </template>
                    </div>
                    <br> <br>
                    <div class="swiper-pagination" ></div>
                </div>
            </div>
        </div>

        <div class="platform haibei-news">
            <p class="c-blue-color fs30 tc">下载客户端</p>
            <p class="fs18 tc mt20 c-gray-color">多平台涵盖，交易自在随心</p>
            <div class="haibei-guide-content clearfix">
                <template v-for="(value,key) in download">
                    <dl class="c-gray-color tc platform-item index-items">
                        <dt class="tc"><a href="javascript:;"> <img :src="value.iconUrl" alt="" width="80"></a></dt>
                    </dl>
                </template>
            </div>

        </div>
        <div class="mt5 fs12  haibei-guide-content" style="color:#ccc;border-top:1px solid #f2f2f2;padding-top:10px;width:90%;margin:0 auto;">
                ICP备案编号：渝ICP备16010906号-1 <br> 全国唯一客服邮箱：kefu@haibeiclub.com                
        </div>



        <div class="wap-footer" style="border-top:1px solid #ccc;">
            <div style="padding-left:10px;"><img src="/static/images/wap/icon13.png" width="50" alt=""></div>
            <div>
                <p style="color:#1A2845;font-size:14px;">下载“海贝社区” APP</p>
                <p style="color:#1A2845;font-size:12px;margin-top:5px;">交易可以很简单！</p>
            </div>`
            <div>
                <a href="javascript:;" class="wap-download" @click="downloadAPP">立即前往</a>
            </div>
        </div>
    </div>
</template>

<script>
import items from './data.js';
import AppComm from '@/utils/download_wap';
    export default {
    name: 'wap',
    data() {
        return {
            platform: items.platform,
            download: dConfig.download,
            newsList: items.wapNewsList
        }
    },
    mounted() {
        new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            //    paginationClickable: true,
            autoplay: 2000,
            speed: 300,
        });

    },
    methods: {
        downloadAPP() {
            AppComm.init();
        }
    }
}
</script>

<style scoped>
  #wap {
            max-width: 750px;
        }

        .wap-header {
            width: 100%;
            background: url(/static/images/wap/bg1.jpg) top center no-repeat;
            background-size: cover;
            height: 100vh;
            position: relative;
        }

        .wap-header img {
            max-width: 100%;
        }

        .wap-footer {
            background: url(/static/images/wap/bg2.png) top right no-repeat;
            height: 70px;
            background-size: cover;
            position: fixed;
            bottom: 0;
            z-index: 2;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .wap-logo {
            padding: 15px 0 0 15px;
        }

        .wap-img-text {
            padding: 80px 0 0 15px;
        }

      

        .down-crr-img {
            bottom: 100px;
            position: absolute;
            width: 100%;
          
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;


            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            
        }
        .wap-download{background:#1A2845}
</style>